'use strict';
import React from "react";
import {ScrollView, ScrollViewComponent, StyleSheet, Text, View} from "react-native";
import NavigationBar from "../../component/navigation/NavigationBar";
import ImageView from "../../component/common/ImageView";
import Container from "../../component/common/Container";
import Button from "../../component/common/Button";
import Carousel from "teaset/components/Carousel/Carousel";

class GoodsDetail extends React.Component {

    constructor(props) {
        super(props);
        this.goods_id = this.props.navigation.state.params.goods_id;
        // console.log('传过来的goods_id-------->', this.goods_id);
        this.state = {data: {}};
    }

    componentDidMount() {
        this.requestGoodsDetail();
    }

    // beginDate: null
    // by_sel_count: 0
    // count: 0
    // create_time: 1541986366000
    // endDate: null
    // goods_category: "电脑"
    // goods_desc: "123"
    // goods_desc_imgs: ""
    // goods_id: "0a612dddeb6e4c9fa6c6c24a863faec8"
    // goods_imgs: ",cb911094c3ac4c4cb3acd36246a72c39.jpg"
    // goods_name: "添加测试2"
    // goods_picture: ",4a1e397ba5c14c33bd1dcb08bf7e0f40.jpg"
    // goods_price: 123
    // goods_status: "normal"
    // index: null
    // limit: 10
    // page: 1
    // search_key: null
    // sel_count: null

    requestGoodsDetail = async () => {
        const data = {goods_id: this.goods_id};
        // const result = await Services.clearPost(`${ServicesApi.GOODS_DETAIL}?goods_id=${this.goods_id}`,data);
        const result = await Services.post(ServicesApi.GOODS_DETAIL, data);
        // console.log('商品详情返回-------->', result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            this.setState({data: result.data});
        } else {
            ToastManager.show(result.dec || 'error');
        }
    };

    _onPress = () => {
        // console.log('立即兑换');
        RouterHelper.navigate('积分兑换', 'PointExchange', {item: this.state.data})
    };

    render() {
        const {params} = this.props.navigation.state;
        const pageTitle = params.pageTitle || '积分商城';
        const width = SCREEN_WIDTH;
        const height = width * 0.532;
        const maxWidth = SCREEN_WIDTH - 8;
        const imgArr = this.state.data.goods_imgs ? this.state.data.goods_imgs.split(',') : [this.state.data.goods_picture];
        const goodsImgs = this.state.data.goods_desc_imgs ? this.state.data.goods_desc_imgs.split(',') : [];

        return (
            <Container>
                <NavigationBar
                    title={pageTitle}
                />
                <ScrollView style={styles.scroll}>
                    <Carousel
                        style={{width, height}}
                        carousel={true}
                        cycle={true}
                        control={true}
                    >
                        {
                            imgArr.map((item, i) => {
                                let imgUrl = {uri: ServicesApi.QI_NIU_LINK + item};
                                return (
                                    <ImageView
                                        key={i}
                                        resizeMode={'cover'}
                                        style={{width, height}}
                                        source={imgUrl}
                                    />
                                )
                            })
                        }
                    </Carousel>
                    <View style={styles.headRow}>
                        <Text style={styles.headName}>{this.state.data.goods_name}</Text>
                        <Text style={styles.headPoint}>{`${this.state.data.goods_price}积分`}</Text>
                    </View>
                    <Text style={styles.detailTitle}>商品详情</Text>
                    <Text style={styles.detailText}>{this.state.data.goods_desc}</Text>
                    {goodsImgs.map((item, i) => {
                        let imgUrl = {uri: ServicesApi.QI_NIU_LINK + item};
                        return (
                            <ImageView
                                maxImageWidth={SCREEN_WIDTH - 16}
                                key={i}
                                resizeMode={'cover'}
                                source={imgUrl}
                                style={{marginHorizontal: 8, marginVertical: 10}}
                            />
                        )
                    })}
                </ScrollView>
                <Button
                    title={'立即兑换'}
                    style={styles.button}
                    titleStyle={styles.buttonTitle}
                    onPress={this._onPress}
                />
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    scroll: {
        flex: 1,
    },
    headRow: {
        marginHorizontal: 8,
        flexDirection: 'row',
        marginTop: 8,
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    headName: {
        fontSize: FontSize(16),
        color: "#333",
    },
    headPoint: {
        fontSize: FontSize(18),
        color: "#ffa64f",
    },
    detailTitle: {
        marginTop: 12,
        marginLeft: 8,
        fontSize: FontSize(15),
        color: "#575757",
    },
    detailText: {
        fontFamily: "PingFangSC-Regular",
        lineHeight: 20,
        fontSize: FontSize(14),
        color: "#828282",
        marginHorizontal: 8,
        marginTop: 5,
    },
    detailImage: {
        alignSelf: 'center',
        marginTop: 10,
    },
    button: {
        borderRadius: 0,
        paddingVertical: 15,
        backgroundColor: "#ffa64f",
    },
    buttonTitle: {
        fontSize: FontSize(13),
        color: "#ffffff"
    },
});

export default GoodsDetail